<html>
<head>
<title>可视化界面说明</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type=text/css>
body  { margin:0px; FONT-SIZE: 12px;text-decoration: none; overflow:hidden}
table  { border:0px; }
td  { font:normal 12px 宋体; }
img  { vertical-align:bottom; border:0px; }
a  { font:normal 12px 宋体; color:#000000; text-decoration:none; }
a:hover  { color:#cc0000;text-decoration:underline; }
.sec_menu  { border-left:1px solid white; border-right:1px solid white; border-bottom:1px solid white; overflow:hidden; background:#FFFFCC; }
.menu_title  { }
.menu_title span  { position:relative; top:0px; left:20px; color:#39867B; font-weight:bold; }
.menu_title2  { }
.menu_title2 span  { position:relative; top:2px; left:8px; color:#cc0000; font-weight:bold; }
</style>
</head>
<body>
<div style="margin:12px;border:1px solid gray">
<table cellpadding="2" cellspacing="1" border="0" width="98%" class="border" align=center>
  <tr align="center"> 
    <td height=25 colspan=2 class="topbg"><h3>KnifeCMS可视化操作说明</h3></td>
    </tr>
</table>
<br>
<table cellpadding="2" cellspacing="1" border="0" width="98%" class="border" align=center>
	<tr> 
    <td height="200">
      <div>
      	<h4>为了实现网站模板的可视化布局功能，需要适当的修改模板源码，应实现如下步骤：</h4>
      	<ul>
      		<li><b>1.定义固定列</b><br/>在选定的容器(Table,Div)上增加className:"column"；</li>
      		<li><b>2.定义活动元</b><br/>在固定列内设定可拖动的子容器(Div)，增加className:"portlet"；</li>
      		<li><b>3.标记此模板为可视化模板</b><br/>在html源码的head元素内，增加标记:"$visualDesign"；</li>
      		<li>确保以上三步操作正确后，即可使用此功能</li>
        </ul>
      </div>
      </td>
	</tr>
</table>
</div>
<div align="center">
<br>
  Copyright (c) 2011<a href='http://www.knifecms.com'><font Arial, Helvetica, sans-serif>KnifeCMS</font></a>. 
  All Rights Reserved.<BR>
  <BR>
</div>
</body>
</html>